<template>
	<statusBarVue title="话题" :isShowBar="true" :isShowLeft="true" />
	<view class="topic-page" :style="pageHaveBarStyle">
		<movable-area class="topic-page-movable-area">
			<view class="topic-page-group">
				<view class="topic-page-list" :style="{ height: 'calc('+ pageHeighthaveBar +'px - 12px)' }">
					<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
						:up="mescrolTop" :down="mescrolDown" :fixed="false">
						<view v-for="(item,index) in topicList" :key="index" class="topic-page-item">
							<!-- 作者信息 -->
							<view class="author-group">
								<view class="author-info">
									<image class="user" :src="item.user.avatar" />
									<text class="user-name">{{item.user.nick}}</text>
									<text class="edit-time">
										{{ handleTimeStrToTimeStamp(item.ts) }}
									</text>
									<view class="selected" v-if="item.essential">精</view>
									<!-- <view class="top" v-if="item">置顶</view> -->
								</view>
								<view class="operate" @click="open('popup')">
									<icon class="more"></icon>
								</view>
							</view>
							<!-- 内容 -->
							<view class="contents" @click.stop="handlefavorite(item)">
								<view class="tit">
									{{item.title}}
								</view>
								<view class="content" v-for="(v, i) in item.contents" :key="'item-'+i">
									<view v-if="v.content_type === 0" class="text">{{v.content}}</view>
									<view v-if="v.content_type === 1" class="imgs">
										<image :src="v.href" @click.stop="handlePreviewImage(v.href)" class="img" />
									</view>
								</view>
							</view>
							<!-- 操作图标 -->
							<view class="function-btns">
								<button class="btn" @click="handleShare" open-type="share">
									<icon class="icon icon-share"></icon>
									{{item.favers}}
								</button>
								<view class="btn" @click="postTopicMarkGoodApi(item.id)">
									<icon :class="'icon ' + ((item.be_good) ? 'icon-like-active' : 'icon-like') ">
									</icon>
									{{item.goods}}
								</view>
								<view class="btn" @click="postTopicMarkBedApi(item.id)">
									<icon :class="'icon ' + ((item.be_bad) ? 'icon-loathe-active' : 'icon-loathe') ">
									</icon>
									{{item.bads}}
								</view>
								<view class="btn" @click="postAddFavoriteApi(item.id)">
									<icon
										:class="'icon ' + ((item.be_favor) ? 'icon-collect-active' : 'icon-collect') ">
									</icon>
									{{item.favers}}
								</view>
								<view class="btn" @click="handlefavorite(item)">
									<icon class="icon icon-comment"></icon>
									{{item.ups}}
								</view>
							</view>
						</view>
					</mescroll-uni>
				</view>
			</view>

			<!-- 发表话题 -->
			<movable-view inertia direction="all" class="topic-page-movable-view" :x="viewInfo.right - 60"
				:y="viewInfo.height - 180">
				<button class="push-topic-btn" @click="handleToAdd">
					<uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
				</button>
			</movable-view>
		</movable-area>


		<!-- 操作 -->
		<uni-popup ref="popup" type="bottom" borderRadius="16px 16px 0 0" safeArea backgroundColor="#F3F3F5">
			<view class="popup operate-popup">
				<view class="popup-h operate-popup-h">
					<view class="tit">操作</view>
					<button class="close" @click="close('popup')">
						<uni-icons type="closeempty"></uni-icons>
					</button>
				</view>
				<view class="popup-b operate-popup-b">
					<scroll-view class="scroll-view" scroll-x="true" @scroll="scroll" scroll-left="120">
						<view class="operate-popup-b-con">
							<view class="btn del">
								<view class="icon icon-del">
									<uni-icons type="trash-filled" size="30"></uni-icons>
								</view>
								<view>删帖</view>
							</view>
							<view class="btn choice">
								<view class="icon icon-choice">精</view>
								<view>加精</view>
							</view>
							<view class="btn up">
								<view class="icon">
									<uni-icons type="arrow-up" size="30"></uni-icons>
								</view>
								<view>置顶</view>
							</view>
							<view class="btn wx">
								<button open-type="share" plain @click="handleShare" class="btn-b">
									<view class="icon">
										<uni-icons type="weixin" size="30"></uni-icons>
									</view>
									<view>分享链接</view>
								</button>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';

	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	import {
		publics
	} from '@/mixins/publics.js';

	import {
		getCheckTopicsList,
		postAddFavorite,
		postTopicMarkGood,
		postTopicMarkBed
	} from "@/utils/api"

	export default {
		mixins: [publics, MescrollMixin],
		components: {
			statusBarVue
		},
		data() {
			return {
				fid: '',
				mescrolTop: {
					use: true
				},
				mescrolDown: {
					use: true,
					auto: false,
					mustToTop: true
				},
				topicList: []
			}
		},
		onShareAppMessage(){
			// 监听用户右上角的转发
		},
		onShareTimeline(){
			// 监听用户右上角的分享到朋友圈
		},
		onLoad(options) {
			if (options.fid) {
				this.fid = options.fid;
			}
		},
		onShow() {
			this.mescroll.triggerDownScroll();
		},
		methods: {
			handleShare() {},
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条

				this.getCheckTopicsListApi(page);
			},
			reloadList() {
				this.mescroll.resetUpScroll();
			},
			// 查看详情
			handlefavorite(item) {
				uni.navigateTo({
					url: `/homePages/topic/details?topicId=${item.id}&showBtn=true&fid=${this.fid}`
				});
			},
			// 收藏
			postAddFavoriteApi(code) {
				postAddFavorite(code).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '收藏成功！'
						});
						this.reloadList();
					}
				})
			},
			// 点赞
			postTopicMarkGoodApi(code) {
				postTopicMarkGood(code).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '点赞成功！'
						});
						this.reloadList();
					}
				})
			},
			// 点踩
			postTopicMarkBedApi(code) {
				postTopicMarkBed(code).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '操作成功！'
						});
						this.reloadList();
					}
				})
			},
			// 查询列表接口
			getCheckTopicsListApi(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条

				const postData = {
					fid: this.fid,
					next_ts: pageNum - 1,
					page_size: pageSize
				};

				getCheckTopicsList(postData).then(res => {
					if (res.code === 200) {
						if (postData.next_ts > 0) {
							this.topicList = this.topicList.concat(res.data.topics);
						} else {
							this.topicList = res.data.topics;
						}
						this.mescroll.endBySize(this.topicList.length, res.data.next_ts)
					}
				}).catch(data => {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			},

			// 发表新的话题
			handleToAdd() {
				uni.navigateTo({
					url: `/homePages/topic/editingTopicForm?fid=${this.fid}`
				});
			},
			open(ref) {
				this.$refs[ref].open('bottom')
			},
			close(ref) {
				this.$refs[ref].close()
			},
		}
	}
</script>

<style lang="scss">
	.topic-page {
		position: relative;
		left: 0;
		right: 0;
		z-index: 99;
		overflow: auto;
		background: linear-gradient(to bottom, transparent 0%, #F5F6FA 20%, #F5F6FA 100%);

		.topic-page-movable-area {
			width: 100%;
			height: 100%;

			.topic-page-movable-view {
				width: auto;
				height: auto;

				.push-topic-btn {
					width: 49px;
					height: 49px;
					line-height: 49px;
					padding: 0;
					background: #22A366;
					color: #fff;
					border-radius: 100%;
				}
			}
		}

		&-group {
			width: 94.67vw;
			margin: auto;
			position: relative;

			.topic-page-list {
				width: 100%;
				height: 100%;
				// position: absolute;
				// overflow: auto;
			}

			.topic-page-item {
				background-color: #fff;
				margin-bottom: 10px;
				padding: 12px;
				border-radius: 10px;
			}

			.author-group {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 6px;

				.author-info {
					height: 30px;
					line-height: 30px;
					font-weight: 400;
					display: flex;
					align-items: center;
					flex-direction: row;

					.user {
						width: 26px;
						height: 26px;
						margin-right: 9px;
						border-radius: 26px;
					}

					.user-name {
						font-size: 12px;
						color: #1E1F23;
						margin-right: 11px;
					}

					.edit-time {
						font-size: 11px;
						color: #9B9B9B;
						margin-right: 4px;
					}

					.selected {
						width: 20px;
						height: 15px;
						background: #FFF1DE;
						border: 0.7px solid #FFE4BE;
						border-radius: 2.8px;
						font-size: 8.4px;
						color: #BA7500;
						line-height: 14px;
						text-align: center;
						margin-right: 4px;
					}

					.top {
						width: 28px;
						height: 15px;
						background: #EAF3FF;
						border: 0.7px solid #CBE1FF;
						border-radius: 2.8px;
						font-size: 8.4px;
						color: #2A5BC9;
						line-height: 14px;
						text-align: center;
					}
				}

				.operate {
					width: 12px;

					.more {
						width: 3px;
						height: 12px;
						background: url("/static/images/icon/more1.png") no-repeat 0 0;
						background-size: 100% 100%;
					}
				}
			}

			.contents {
				.tit {
					font-weight: bold;
					font-size: 16px;
					color: #1E1F23;
					line-height: 25px;
					margin-bottom: 3px;
				}


				.content {
					.text {
						font-weight: 400;
						font-size: 15px;
						color: #1E1F23;
					}

					.imgs {
						.img {
							width: 100px;
							height: 100px;
							border-radius: 4px;
							margin-right: 4px;
						}
					}

				}

			}

			.function-btns {
				margin-top: 8px;
				color: #5F6270;
				height: 30px;
				line-height: 30px;
				display: flex;
				justify-content: space-between;

				.btn {
					font-size: 16px;
					margin: 0;
					border: none;
					background: none;
					padding: 0;
					line-height: inherit;
					border-radius: inherit;
					
					&:after{
						border:none;
					}
				}

				.icon {
					width: 20px;
					height: 20px;
					vertical-align: text-top;
					margin-right: 2px;

					&-share {
						background: url("/static/images/icon/21.png") no-repeat 0 0;
						background-size: 100% 100%;
					}

					&-like {
						background: url("/static/images/icon/6.png") no-repeat 0 0;
						background-size: 100% 100%;

						&-active {
							background: url("/static/images/icon/6-a.png") no-repeat 0 0;
							background-size: 100% 100%;
						}
					}

					&-loathe {
						background: url("/static/images/icon/5.png") no-repeat 0 0;
						background-size: 100% 100%;

						&-active {
							background: url("/static/images/icon/5-a.png") no-repeat 0 0;
							background-size: 100% 100%;
						}
					}

					&-collect {
						background: url("/static/images/icon/3.png") no-repeat 0 0;
						background-size: 100% 100%;

						&-active {
							background: url("/static/images/icon/3-a.png") no-repeat 0 0;
							background-size: 100% 100%;
						}
					}

					&-comment {
						background: url("/static/images/icon/1.png") no-repeat 0 0;
						background-size: 100% 100%;
					}
				}
			}
		}

		.popup {
			height: 42vw;
			background: #F3F3F5;
			border-radius: 16px 16px 0 0;
			padding: 14px 16px;

			&-h {
				width: 100%;
				height: 27px;
				line-height: 27px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.tit {
					font-weight: 600;
					font-size: 16px;
					color: #131315;
				}

				.close {
					width: 27px;
					height: 27px;
					line-height: 27px;
					border-radius: 100%;
					background: #DCDCDE;
					color: #0F0F10;
					margin: initial;
					padding: 0;
					text-align: center;
				}
			}

			&-b {
				padding: 27px 0;

				.scroll-view {
					height: 120px;
				}

				.operate-popup-b-con {
					display: flex;
					flex-wrap: nowrap;
					flex-direction: row;
					align-items: flex-start;

					.btn {
						height: 80px;
						text-align: center;
						margin: 0 12px;
						display: inline-block;

						.btn-b {
							border: none;
							margin: 0;
							padding: 0;
							line-height: inherit;
							font-size: 16px;
						}
					}
				}

				.icon {
					width: 53px;
					height: 53px;
					line-height: 53px;
					background: #FFFFFF;
					text-align: center;
					padding: 0;
					border-radius: 100%;
					font-size: 20px;
					color: #000;
					margin: 0 auto 6px;


					.icon-choice {
						font-family: PingFangSC-Regular;
						font-weight: 400;
						color: #19191C;
					}
				}
			}
		}
	}
</style>